<!--
 * @Author: 徐伟杰
 * @Date: 2022-09-21 15:47:46
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-06-04 14:33:37
 * @Description: 
 * @Email: 1529315455@qq.com
 * @Company: 3xData
 * @youWant: 工作台 =》 故障整改
-->
<template>
  <view class="contaienr_page">

    <view class="page">
      <!-- 顶部自定义导航栏 -->
      <action-bar :options="navOptions" />

      <view class="header">
        <view class="search">
          <!-- 反馈状态 -->
          <!-- <view class="select_type">
          <picker mode="selector"
                  class="selector"
                  :range="selectRange.backState"
                  range-key="label"
                  @change="selector($event, 'backState')">
            <view>整改方案：{{ searchObject.showBackState || "请选择" }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>
        </view>
        <view class="select_type">
          <picker mode="selector"
                  class="selector"
                  :range="selectRange.backState"
                  range-key="label"
                  @change="selector($event, 'backState')">
            <view>整改结论：{{ searchObject.showBackState || "请选择" }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>
        </view> -->
          <!-- <view class="select_type">
          <picker mode="selector"
                  class="selector"
                  :range="selectRange.backState"
                  range-key="label"
                  @change="selector($event, 'backState')">
            <view>是否整改：{{ searchObject.showBackState || "请选择" }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>
        </view> -->
          <!-- 搜索框  -->
          <view class="search_bar">
            <view class="search_input">
              <input placeholder="请输入项目名称" v-model="searchObject.title" />
              <view @click="getList()" class="cuIcon-search" />
            </view>
          </view>
        </view>
      </view>
      <view class="main" v-if="list.length > 0">
        <scroll-view-y @refresh="refresh()" :pageNo="searchObject.pageNo" :pageSize="searchObject.pageSize"
          :total="total" @getMore="getMore()" :height="180">
          <template slot="scrollView_content">
            <view class="list" v-for="(list, index) in list" :key="index" @click="nevTo(list)">
              <view class="list-type">{{ list.serviceType }}</view>
              <view class="list-card flex flex-direction justify-between">
                <view class="flex justify-between">
                  <view class="list-card-title">{{ list.projectName }}</view>
                  <!-- <view class="list-card-rectify noRectify">未整改</view> -->
                </view>
                <view class="flex justify-between">
                  <view class="list-card-name">{{ list.projectHeadName }}</view>
                  <view class="list-card-name">生效日期: {{ list.createTime }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="box" :class="list.rectificationPlanCount == '已上传' ? 'yesBox' : 'noBox'">
                    整改方案：{{ list.rectificationPlanCount || null }}</view>
                  <view class="box " :class="list.rectificationConclusionCount == '已上传' ? 'yesBox' : 'noBox'">
                    整改结论：{{ list.rectificationConclusionCount || null }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="box " :class="list.tipsCount == '已上传' ? 'yesBox' : 'noBox'">监管提示：{{ list.tipsCount ||
                    null
                  }}</view>
                </view>
              </view>
              <view class="cuIcon-right"></view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无报告"></no-data>
    </view>
  </view>
</template>

<script>
import ScrollViewY from "@/components/scrollViewY/index.vue";
export default {
  components: {
    ScrollViewY,
  },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList,
    };
  },
  data() {
    return {
      dataStatus: "刷新", // 用于解决闪烁问题

      // 导航栏参数
      navOptions: {
        left: {
          icon: "back",
        },
        center: {
          title: "故障整改",
        },
      },
      selectRange: {
        backState: [
          // 反馈
          {
            label: "是",
            value: "1",
          },
          {
            label: "否",
            value: "0",
          },
        ],
      },
      searchObject: {
        showBackState: "",
        isInconformity: 1,
        title: "",
        pageNo: 1,
        pageSize: 10,
      },
      list: [],
      loading: false,
    }
  },
  created() {
    this.getList()
  },

  methods: {
    selector(e, type) {
      console.log(e, type)
      //   this.searchObject[type] = this.selectRange[type][e.detail.value].value;
      //   this.searchObject.showBackState = this.selectRange[type][e.detail.value].label;
    },
    getList() {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      let data = {
        projectName: this.searchObject.title, // 项目名称
        // projectState: this.searchObject.showBackState, // 是否整改
        // isRectification: null, // 是否故障（0、没有故障；1、存在故障）
        isInconformity: this.searchObject.isInconformity,
        pageNo: this.searchObject.pageNo,
        pageSize: this.searchObject.pageSize,
      }
      return new Promise((resolve, reject) => {
        this.$store.dispatch('get_list_falut', data).then(res => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
      });
    },
    // 上拉刷新
    refresh() {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 下拉加载 
    getMore() {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
        this.getList()
      }
    },
    nevTo(item) {
      uni.navigateTo({
        url: "./form?reportId=" + item.reportId
      })
    }
  },
  computed: {
    // 内容页的 最小高度 100vh - 顶部自定义标题栏 - 顶部搜索 - 底部按钮
    contentHeight() {
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      // 顶部自定义导航栏高度
      const actionBarHeight =
        uni.getStorageSync("menuInfo").actionBarHeight + 40;

      if (navigationBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + 100 + navigationBarHeight) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 84px - 100px);";
      }
    },

    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },

    // 底部新增按钮padding掉导航栏的位置
    paddingBottom() {
      if (this.navigationBarHeight) {
        return "padding-bottom:" + this.navigationBarHeight + "px;";
      } else {
        return "";
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.contaienr_page {
  min-height: 100vh;
}

.header {
  position: sticky;
  background-color: $OVERALL_SITUATION_BACKGROUND;
  padding: 0 24rpx 24rpx 24rpx;
  top: 80rpx;
  z-index: 999;

  .select_type {
    display: flex;
    margin-bottom: 24rpx;

    .selector {
      color: white;
      font-size: 36rpx;
      flex: 1;

      view[class*="cuIcon"] {
        display: inline-block;
        margin: 0 10rpx;
      }
    }
  }

  // 搜索框搜索
  .search_bar {
    border-radius: 20rpx;
    padding: 12rpx 24rpx;
    background: white;
    display: flex;

    .search_input {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      padding: 0 24rpx;
      border-radius: 20rpx;

      input {
        flex: 1;
        font-size: 36rpx;
      }
    }
  }
}

.main {
  min-height: calc(100vh - 180rpx);
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

  .list {
    width: calc(100% - 40rpx);
    height: 228rpx;
    margin: 0 auto 24rpx;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    background: #ffffff;
    border-radius: 20rpx;

    &-type {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50% 50%;
      font-size: 28rpx;
      color: #fff;
      padding: 6rpx;
      text-align: center;
      background: #246fcb;
    }

    &-card {
      width: 550rpx;
      height: 200rpx;

      &-title {
        font-weight: 600;
        font-size: 30rpx;
        color: #000;
      }

      // 当为未整改时，背景颜色为#fb433a;否则背景颜色为#2668cb
      .noRectify {
        background: #fb433a;
      }

      .yesRectify {
        background: #2668cb;
      }

      &-rectify {
        height: 46rpx;
        line-height: 46rpx;
        padding: 0 10rpx;
        border-radius: 6rpx;
        color: #fff;
      }

      &-name {
        color: #cdcbcc;
        font-size: 26rpx;
        font-weight: 500;
      }

      // 当为未上传时，背景颜色为#efc6c1;否则背景颜色为#dee9fc
      .noBox {
        background: #efc6c1;
        color: #ce3f44;
      }

      .yesBox {
        background: #dee9fc;
        color: #345ac7;
      }

      .box {
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 6rpx;
        border-radius: 6rpx;
      }
    }
  }
}
</style>